<!DOCTYPE html>
<html>
    <!-- JavaScript层次节点练习 -->
    <head>
        <meta charset="utf-8"/>
      
    </head>
    <style>
        .div{
            font-size:50px;
        }
        .div{
            font-size: 16px;
        }
    </style>
    <body>
        
<ul id="ul" class ="ul">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
</ul>
<div style="width:100%;height:30px;background-color: blue;" id="div1">

</div>
<br/>
<button onclick="appendImg()">在文档最后插入一张图片</button>
<button onclick="insertImg()">在ul与div之间插入一张图片</button>
<script type="text/javaScript">
    function appendImg(){
        var img = document.createElement("img"); //创建一个图片节点
        img.setAttribute("src","C:/Users/24098/Pictures/Book类代码截图.png"); //给img节点设置属性
        document.body.appendChild(img);//将设置好的img节点追加到body最后

        
    }    
    function insertImg(){
        var img = document.createElement("img"); //创建一个图片节点
        img.setAttribute("src","C:/Users/24098/Pictures/s1462620.jpg"); //给img节点设置属性
        var div1 = document.getElementById("div1");
        document.body.insertBefore(img,div1);
        } 

</script>
</body>

</html>